<template>
  <div id="SelfTopic">
    <el-breadcrumb
      separator="/"
      style="padding-left: 10px; padding-bottom: 10px; font-size: 12px"
    >
      <el-breadcrumb-item>系统首页</el-breadcrumb-item>
      <el-breadcrumb-item>活动中心</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="box-card" shadow="hover">
      <el-form
        :inline="true"
        :model="queryMap"
        size="small"
        class="demo-form-inline"
      >
        <el-form-item label="活动名称">
          <el-input
            v-model="queryMap.topicName"
            placeholder="请输入活动名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="活动类型" label-width="70px">
          <el-select
            v-model="queryMap.topicType"
            placeholder="请选择活动类型"
            clearable
          >
            <el-option
              v-for="item in topicTypes"
              :key="item.topicTypeId"
              :label="item.topicTypeName"
              :value="item.topicTypeId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="时间范围" label-width="70px">
          <el-date-picker
            v-model="dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button
            @click="search"
            type="primary"
            icon="el-icon-search"
            :loading="loading"
            round
            >查询</el-button
          >
          <el-button
            type="success"
            icon="el-icon-upload"
            @click="(uploadTopicShow = true), (currentTopic = {})"
            round
            disabled=true
            >活动申请</el-button
          >
        </el-form-item>
        <el-form-item
          ><download-excel
            :fields="json_data"
            :data="stuTopicList"
            worksheet="sheet1"
            name="个人分数详情.xlsx"
            ><el-button type="primary" icon="el-icon-download" round 
              >分数导出</el-button
            ></download-excel
          ></el-form-item
        >
      </el-form>
      <template>
        <el-table
          :data="stuTopicList"
          border
          stripe
          size="small"
          style="width: 100%; margin-top: 5px"
        >
          <el-table-column
            prop="topicName"
            label="活动名称"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="topicTypeName"
            label="活动类型"
            align="center"
          ></el-table-column>
          <el-table-column prop="createTime" label="提交时间" align="center"
            ><template slot-scope="scope">{{
              scope.row.submitTime | dateFormat
            }}</template></el-table-column
          >
          <el-table-column
            prop="score"
            label="分数"
            align="center"
          ></el-table-column>
          <el-table-column prop="type" label="审核状态" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.type == 0" style="color: #ff4949"
                >审核不通过</span
              >
              <span v-if="scope.row.type == 1">已提交</span>
              <span v-if="scope.row.type == 2" style="color: #e0f516"
                >管理员已审核</span
              >
              <span v-if="scope.row.type == 3" style="color: #409eff"
                >教师已审核</span
              >
              <span v-if="scope.row.type == 4" style="color: #13ce66"
                >审核通过</span
              >
              <el-progress
                v-if="scope.row.type == 0"
                text-inside="true"
                stroke-width="15"
                :percentage="0"
                status="exception"
              ></el-progress>
              <el-progress
                v-if="scope.row.type == 1"
                text-inside="true"
                stroke-width="15"
                :percentage="25"
              ></el-progress>
              <el-progress
                v-if="scope.row.type == 2"
                text-inside="true"
                stroke-width="15"
                :percentage="50"
                status="exception"
              ></el-progress>
              <el-progress
                v-if="scope.row.type == 3"
                text-inside="true"
                stroke-width="15"
                :percentage="75"
                status="warning"
              ></el-progress>
              <el-progress
                v-if="scope.row.type == 4"
                text-inside="true"
                stroke-width="15"
                :percentage="100"
                status="success"
              ></el-progress> </template
          ></el-table-column>
          <el-table-column label="操作" width="200" align="center">
            <template slot-scope="scope">
              <el-button
                type="text"
                icon="el-icon-edit"
                size="mini"
                :loading="loading"
                @click="getCurrentTopicDetail(scope.row.topicId)"
                :disabled="scope.row.type != 0"
                >编辑</el-button
              >
              <el-button
                type="text"
                icon="el-icon-delete"
                size="mini"
                :loading="loading"
                @click="delCurrentTopicDetail(scope.row.topicId)"
                :disabled="scope.row.type == 4"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </template>
      <!-- 分页 -->
      <el-pagination
        style="margin-top: 10px"
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="this.queryMap.page"
        :page-sizes="[10, 50, 100, 1000]"
        :page-size="this.queryMap.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </el-card>
    <el-dialog title="当前活动详情" :visible.sync="show" width="330px">
      <el-form :model="currentStuTopic" align="center">
        <el-form-item label="活动名称" label-width="70px">
          <el-input
            v-model="currentStuTopic.topicName"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="上传分数" label-width="70px">
          <el-input
            type="number"
            v-model="currentStuTopic.score"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="过期时间" label-width="70px">
          <el-date-picker
            disabled
            v-model="currentStuTopic.submitTime"
            type="date"
            placeholder="选择日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="活动类型" label-width="70px">
          <el-select
            v-model="currentStuTopic.topicType"
            placeholder="请选择活动类型"
          >
            <el-option
              v-for="item in topicTypes"
              :key="item.topicTypeId"
              :label="item.topicTypeName"
              :value="item.topicTypeId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="撤回原因" label-width="70px">
          <el-input
            disabled
            v-model="currentStuTopic.reason"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitStuTopic" :loading="loading"
          >确 定</el-button
        >
        <el-button @click="show = false">取 消</el-button>
      </div>
    </el-dialog>
    <el-dialog title="上传活动" :visible.sync="uploadTopicShow" width="400px">
      <el-form
        :model="currentTopic"
        align="center"
        ref="topicRuleRef"
        :rules="topicRule"
      >
        <el-form-item
          label="活动类型"
          label-width="80px"
          prop="topicType"
          :rules="[
            {
              required: true,
              message: '活动类型不能为空',
              trigger: 'blur',
            },
          ]"
        >
          <el-select
            v-model="currentTopic.topicType"
            placeholder="请选择活动类型"
          >
            <el-option
              v-for="item in topicTypes"
              :key="item.topicTypeId"
              :label="item.topicTypeName"
              :value="item.topicTypeId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="活动名称"
          label-width="80px"
          :rules="[
            {
              required: true,
              message: '活动名称不能为空',
              trigger: 'blur',
            },
          ]"
          prop="topicName"
        >
          <el-input
            v-model="currentTopic.topicName"
            autocomplete="off"
            style="width: 220px"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="上报分数"
          label-width="80px"
          :rules="[
            {
              required: true,
              message: '分数不能为空',
              trigger: 'blur',
            },
          ]"
          prop="uploadScore"
        >
          <el-input-number
            v-model="currentTopic.uploadScore"
            style="width: 220px"
            :step="0.1"
            :min="0.1"
            :max="10"
          ></el-input-number>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" :loading="loading" @click="saveTopic"
          >确 定</el-button
        >
        <el-button @click="uploadTopicShow = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { mapState } from "vuex";
import {
  queryCurrentStuTopic,
  queryTopicTypes,
  queryCurrentStuTopicDetail,
  editCurrentStuTopicDetail,
  delCurrentStuTopicDetail,
  uploadTopicByStu,
} from "api/api";
export default {
  data() {
    return {
      queryMap: { page: 1, size: 10 },
      stuTopicList: [],
      total: 0,
      topicTypes: [],
      loading: false,
      show: false,
      currentStuTopic: {},
      dateRange: [],
      currentTopic: {},
      uploadTopicShow: false,
      currentUser: {},
      topicRule: {}, //认证规则
      json_data: {
        学号: "stuNum",
        姓名: "stuName",
        班级: "className",
        参加时间: "submitTime",
        活动类型: "topicTypeName",
        活动名称: "topicName",
        学分: "score",
        等级: "level",
        级别: "region",
        图片: "picture",
      },
    };
  },
  computed: {
    ...mapState(["userInfo"]),
  },
  methods: {
    //改变页码
    handleSizeChange(newSize) {
      this.queryMap.size = newSize;
      this.getCurrentStuTopic();
    },
    //翻页
    handleCurrentChange(current) {
      this.queryMap.page = current;
      this.getCurrentStuTopic();
    },
    //获取当前学生活动信息
    getCurrentStuTopic() {
      queryCurrentStuTopic(this.userInfo.sessionId, this.queryMap).then(
        (res) => {
          if (!res.flag) {
            this.$message.error(res.message);
          } else {
            this.stuTopicList = res.data.rows;
            this.total = res.data.total;
          }
          for (let idx = 0; idx < this.stuTopicList.length; idx++) {
            this.stuTopicList[idx].stuName = this.currentUser.username;
            this.stuTopicList[idx].className = this.currentUser.className;
            this.stuTopicList[idx].stuNum = this.currentUser.num;
          }
        }
      );
    },
    //获取活动类型列表
    getTopicTypes() {
      queryTopicTypes(this.userInfo.sessionId).then((res) => {
        if (!res.flag) {
          this.$message.error(res.message);
        } else {
          this.topicTypes = res.data;
        }
      });
    },
    search() {
      if (this.dateRange != [] || this.dateRange != null) {
        this.queryMap.beforeDate = this.dateRange[0];
        this.queryMap.afterDate = this.dateRange[1];
      }
      console.log(this.queryMap);
      this.loading = true;
      queryCurrentStuTopic(this.userInfo.sessionId, this.queryMap).then(
        (res) => {
          if (!res.flag) {
            this.$message.error(res.message);
            this.loading = false;
          } else {
            this.stuTopicList = res.data.rows;
            this.total = res.data.total;
            this.loading = false;
          }
        }
      );
    },
    //获取当前活动详情
    getCurrentTopicDetail(topicId) {
      this.loading = true;
      this.show = true;
      queryCurrentStuTopicDetail(this.userInfo.sessionId, topicId).then(
        (res) => {
          if (!res.flag) {
            this.$message.error(res.message);
            this.loading = false;
          } else {
            this.currentStuTopic = res.data;
            this.loading = false;
            //重新加载
            this.getTopicTypes();
          }
        }
      );
    },
    //提交
    submitStuTopic() {
      editCurrentStuTopicDetail(
        this.userInfo.sessionId,
        this.currentStuTopic
      ).then((res) => {
        if (!res.flag) {
          this.$message.error(res.message);
        } else {
          this.$message({
            type: "success",
            message: "更新成功！",
          });
          this.show = false;
          this.getCurrentStuTopic();
        }
      });
    },
    //删除活动
    async delCurrentTopicDetail(topicId) {
      var res = await this.$confirm(
        "此操作将删除该活动记录，你将会减少相应的分数，是否继续",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch(() => {
        this.$message({
          type: "info",
          message: "已取消操作！",
        });
      });
      if (res == "confirm") {
        await delCurrentStuTopicDetail(this.userInfo.sessionId, topicId).then(
          (res) => {
            if (!res.flag) {
              this.$message.error(res.message);
            } else {
              this.$message({
                type: "success",
                message: "删除成功！",
              });
              this.getCurrentStuTopic();
            }
          }
        );
      }
    },
    //活动上传
    async saveTopic() {
      await uploadTopicByStu(
        this.userInfo.sessionId,
        this.currentTopic,
        this.currentTopic.uploadScore
      ).then((res) => {
        if (!res.flag) {
          this.$message.error(res.message);
        } else {
          this.$message({
            type: "success",
            message: "新增成功！",
          });
          this.uploadTopicShow = false;
          this.getCurrentStuTopic();
        }
      });
    },
  },
  mounted() {
    this.currentUser = JSON.parse(window.sessionStorage.getItem("token"));
    this.getCurrentStuTopic();
    this.getTopicTypes();
  },
};
</script>